<template>
	<view>
		<u-navbar :border-bottom="false" :is-back="false" :title="navTitle"></u-navbar>
		<view v-if="bannerList.length!=0">
			<u-swiper :border-radius="0" :list="bannerUrlList" height="300" img-mode="scaleToFill"
					  @click="bannerLink">
			</u-swiper>
		</view>
		<view v-if="!iconlist.length">
			<u-empty mode="list" src="/static/tduck/null.png" text="暂无数据"/>
		</view>
		<view class="grid-wrap">
			<view v-for="(listItem,listIndex) in iconlist" :key="listIndex" class="icon-item">
				<u-icon :name="listItem.imgUrl" height="100" imgMode="scaleToFill" width="100"
						@click="openLink(listItem)"></u-icon>
				<text class="grid-text">{{ listItem.name }}</text>
			</view>
		</view>
		<u-tabbar :list="vuex_tabbar" ></u-tabbar>
	</view>
</template>

<script>
import {
	extractParamsFromUrl
} from "../../utils/index";
import {getTabBarList} from "../../utils/tabbar";

export default {
	data() {
		return {
			navTitle: '首页',
			bannerConfigKey: 'homeBanner',
			navConfigKey: 'homeNav',
			bannerList: [],
			iconlist: [],
			bannerUrl: [],
			list: [],
			total: 0,
		};
	},

	computed: {
		bannerUrlList() {
			return this.bannerList.map(item => item.url)
		}
	},
	onLoad() {
		this.$u.api.getPortal().then(res => {
			uni.$u.vuex('vuex_tabbar', getTabBarList(res));
			if (res) {
				this.bannerList = res.configValue.bannerList
				this.iconlist = res.configValue.navList
			}
		})
	},
	onPullDownRefresh() {

	},
	methods: {
		openLink(listItem) {
			let url = listItem.addressUrl
			let params = JSON.stringify(extractParamsFromUrl(url))
			// 如果是网页 就用webview 打开 如果是小程序 就小程序跳转
			if (listItem.type === 2) {
				url = url.split('?')[0];
				uni.navigateTo({
					url: `/pages/common/webview?url=${url}&params=${params}`
				})
			} else if (listItem.type === 3) {
				uni.navigateToMiniProgram({
					appId: listItem.appId,
					path: listItem.addressUrl,
				})
			} else {
				uni.navigateTo({
					url: url
				})
			}
		},
		bannerLink(index) {
			let url = this.bannerUrl[index].addressUrl
			const params = JSON.stringify(extractParamsFromUrl(url))
			console.log(`/pages/common/webview?url=${url}&params=${params}`)
			if (this.bannerUrl[index].type === 2) {
				// 打开webview
				url = url.split('?')[0];
				uni.navigateTo({
					url: `/pages/common/webview?url=${url}&params=${params}`
				})
			} else if (this.bannerUrl[index].type === 3) {
				uni.navigateToMiniProgram({
					appId: this.bannerUrl[index].appId,
					path: this.bannerUrl[index].addressUrl,
				})
			} else {
				uni.navigateTo({
					url: url
				})
			}
		},
	}
};
</script>
<style lang="scss">
page {
	background-color: $u-bg-color;
}
</style>
<style lang="scss" scoped>
page {
	height: 100%;
	background-color: $u-bg-color;
}

.grid-wrap {
	border-radius: 16rpx;
	width: 96%;
	background-color: #FFFFFF;
	margin: 10rpx auto;
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx 0;

}

.icon-item {
	flex-wrap: wrap;
	width: 32%;
	margin: 5rpx; /* 间隔大小，可以根据需要调整 */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-content: center;
}


.grid-text {
	font-size: 14px;
	color: #909399;
	padding: 10rpx 0 20rpx 0rpx;
	/* #ifndef APP-PLUS */
	box-sizing: border-box;
	/* #endif */
}
</style>
